<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置提取余额密码</title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/vant_index.css" />
	</head>
	<body>
	<div id="app" v-cloak>
		<div><p class="page_title">设置提取余额密码</p></div>
		<div class="shurukuang">
			<input type="number" v-model="phone" placeholder="请输入您的手机号码">
			<input type="password" v-model="password" placeholder="请设置提取密码">
			<input type="password" v-model="new_password"  placeholder="请重复输入设置的提取密码">
		</div>
		<div class="btn_con">
			<span @click="updateUser">提交</span>
		</div>
		<div class="intro">说明：之前在公众号上面进行过充值的用户，请再次设置相关信息，设置成功之后，在小程序上面可根据设置的信息进行提取余额。</div>
	</div>
	</body>
	<script src="js/vue.min.js"></script>
	<script src="js/vant.min.js"></script>
	<script src="js/axios.min.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				phone: '',
				password: '',
				new_password: '',
				url: 'https://chaojidai.simexcn.com/api/v1/wechat_user'
			},
			mounted: function () {
				var token = localStorage.getItem("token")
                if(!token) {
					var code = this.GetQueryString('code')
					if(code) {
						this.getUserInfo(code)
					}
				}
			},
			methods: {
				getUserInfo:function (code) {
					var _this = this
					axios.post(_this.url, {
						code: code
					})
					.then(function (response) {
						localStorage.setItem("token",response.data.openid)
					})
					.catch(function (error) {
						localStorage.clear()
						_this.$notify('授权失败请重新进入!');
					});
				},
				updateUser:function() {
					var _this = this
					if(_this.password != _this.new_password) {
						_this.$notify('两次输入的密码不一致!');
						return false
					}
					var token = localStorage.getItem("token");
					if(!token) {
						token = ''
					}
					axios.put(_this.url, {
						openid: token,
						phone: _this.phone,
						password: _this.password
					})
					.then(function (response) {
						localStorage.clear()
						_this.$notify({ type: 'success', message: response.data.msg });
					})
					.catch(function (error) {
						if (error.response) {
							// 请求已发出，但服务器响应的状态码不在 2xx 范围内
							for (var tmp in error.response.data.msg) {
								_this.$notify(error.response.data.msg[tmp]);
							}
						} else {
							// Something happened in setting up the request that triggered an Error
							console.log('Error', error.message);
						}
					});
				},
				GetQueryString: function (name) {
					var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
					var r = window.location.search.substr(1).match(reg);
					if(r!=null)return  decodeURI(r[2]); return 0;
				}
			}
		});
	</script>
</html>
